@charset "utf-8";
@component-namespace app-toolbox-xmap {
  @b navbar {
    width: var(--app-toolbox-xmap-navbar-width);
    height: var(--app-toolbox-xmap-navbar-height);
    line-height: @height;
    background: var(--app-toolbox-xmap-navbar-background-color);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    @utils-user-select none;
    background: url(../../../../../assets/mm_nbk.jpg) repeat;
    background-size: auto 100%;
    @e items-wrapper {
      width: var(--app-toolbox-xmap-navbar-items-wrapper-width);
      height: var(--app-toolbox-xmap-navbar-items-wrapper-height);
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      @e item {
        @m topic {
          width: var(--app-toolbox-xmap-navbar-items-wrapper-topic-width);
          height: var(--app-toolbox-xmap-navbar-items-wrapper-height);
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          @e label {
            margin-left: 0.25rem;
            width: 2.5rem;
            flex: 0 0 auto;
            text-align: center;
            color: var(--app-toolbox-xmap-navbar-items-wrapper-item-label-color);
            font-size: var(--app-toolbox-xmap-navbar-items-wrapper-item-label-font-size);
          }
          @e btn {
            margin-left: 0.25rem;
          }
        }
        @m module {
          overflow: hidden;
          width: var(--app-toolbox-xmap-navbar-items-wrapper-module-width);
          height: var(--app-toolbox-xmap-navbar-items-wrapper-height);
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          @e label {
            width: 2.5rem;
            flex: 0 0 auto;
            text-align: center;
            color: var(--app-toolbox-xmap-navbar-items-wrapper-item-label-color);
            font-size: var(--app-toolbox-xmap-navbar-items-wrapper-item-label-font-size);
          }
          @e btn-wrapper {
            width: var(--app-toolbox-xmap-navbar-items-wrapper-module-btn-wrapper-width);
            margin-left: 0.25rem;
            height: var(--app-toolbox-xmap-navbar-items-wrapper-height);
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            @e btn {
              margin-left: 0.25rem;
            }
          }
        }
      }
    }
    @e funcs-wrapper {
      width: var(--app-toolbox-xmap-navbar-funcs-wrapper-width);
      height: var(--app-toolbox-xmap-navbar-funcs-wrapper-height);
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 0.5rem;
      @e func {
        @m btn-wrapper {
          width: 2.4rem;        
          display: flex;
          align-items: center;
          justify-content: center;
        }
        @m synchronize-wrapper {
          width: 5rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        @m progress-bar-wrapper {
          width: 7rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}